<template>
	<view class="">
		<view
			class="p-15 border border-gray-200 border-solid rounded-md w-100-s flex flex-col justify-center hd-comment-item">
			<view class="flex justify-between mb-20 items-center">
				<view class="flex items-center">
					<u-avatar :src="comment.user.icon" :size="60"></u-avatar>
					<view class="flex flex-col ml-20">
						{{comment.user.name}}
						<text class="text-gray-500 text-sm">2020-12-01</text>
					</view>
				</view>
				<view class="pr-20 text-sm text-gray-800">
					<slot name="right" />
				</view>
			</view>
			<view class="mb-20 text-gray-500" :class="{content:truncateContent}" style="white-space: normal">
				{{comment.content}}
			</view>
			<view class="flex" v-if="comment.images" @click="$hd.previewImage(comment.images)">
				<u-avatar :src="img" mode="square" :size="150" v-for="(img,index) in comment.images" :key="index"
					class="mr-10" />
			</view>
		</view>

		<!-- 回复列表 -->
		<view class="ml-20 mt-20 p-20" v-if="showReply && comment.replys.length">
			<view class="mb-30 p-20 rounded-sm" v-for="reply in comment.replys" :key="reply.id"
				style="background-color: #f5f5f5;align-self: stretch;">
				<view class="flex items-center mb-20">
					<u-avatar :src="reply.user.icon" mode="circle" :size="40" class="mr-10" />
					{{reply.user.name}}
				</view>
				<view class="">
					{{reply.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			comment: Object,
			goods: Object,
			showReply: {
				default: false
			},
			truncateContent: {
				default: false
			},
		}
	}
</script>

<style lang="scss">
	.hd-comment-item {
		.content {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}
</style>
